<template>
	<su-sticky :bgColor="(!state.transparent ||retention) ? '#fff':'transparent'">
		<view class="comp-content ss-flex ss-row-between">
			<view class="ss-flex">
				<!-- 地址 -->
				<view class="position ss-flex ss-row-center" @click="setPopup('Position')">
					<uni-icons type="location" size="18" />
					<view :class="['position-label ss-line-1', {active:state.positionData.ids?.length}]">
						{{state.positionLabel||'位置'}}
					</view>
					<view :class="['position-icon ss-m-t-4',{rotate:state.showPosition}]">
						<uni-icons type="down" size="14" />
					</view>
				</view>
				<!-- 排序 -->
				<view class="sort ss-flex ss-row-center" @click="setPopup('Sort')">
					<view :class="['sort-label', {active:state.sortData}]">
						{{state.sortData.label||'综合排序'}}
					</view>
					<view  :class="['sort-icon ss-m-t-4',{rotate:state.showSort}]">
						<uni-icons type="down" size="14" :color="state.sortData? '#333' : '#999'" />
					</view>
				</view>
			</view>
			<!-- 综合筛选 -->
			<view class="filter ss-flex ss-row-center"  @click="setPopup('Filter')">
				<view class="filter-label">
					筛选
				</view>
				<view class="filter-icon ss-m-t-4">
					<uni-icons type="settings-filled" size="18" />
				</view>
			</view>
		</view>
	</su-sticky>
	<c-position v-model="state.showPosition" :data="state.data" :activeColor="activeColor" @change="onPosition" />
	<c-filter v-model="state.showFilter" :data="state.data" :activeColor="activeColor" @change="onFilter" />
	<c-sort v-model="state.showSort" :data="state.data" :activeColor="activeColor" @change="onSort" />

</template>

<script setup>
	import sheep from '@/sheep';
	import {ref, reactive, computed, onBeforeUnmount, nextTick ,watch} from 'vue'
	import { onLoad, onShow, onHide,onBackPress, onPageScroll  } from '@dcloudio/uni-app';
	import cPosition from './components/c-position.vue'
	import cFilter from './components/c-filter.vue'
	import cSort from './components/c-sort.vue'
	import api from "@/sheep/api/pet.js"
	import { cloneDeep } from 'lodash'
	const emit = defineEmits(['change'])
	const props = defineProps({
		activeColor: {
			type: String,
			default: '#1AC6A0'
		},
		data: {
			type: Object,
			default: () => ({})
		}
	})
	const sys_navBar = sheep.$platform.navbar;
	const state = reactive({
		positionLabel:'',
		showPosition: false,
		showSort: false,
		showFilter: false,
		positionData: {
			ids:[],
			active:[],
			key:''
		},
		transparent:true,
		sortData:{},
		filterData:{},
		data:{},
	})
	const retention = ref(false)
	let timer = null
	watch(state,(newVal,oldVal)=>{
		if(newVal.showPosition || newVal.showSort || newVal.showFilter){
			clearTimeout(timer)
			retention.value = true
		}else{
			clearTimeout(timer)
			timer = setTimeout(()=>{
				retention.value = false
			},300)
		}
	},{
		lazy:true,
		deep:true,
		flush:'post'
	})
	onPageScroll ((e)=>{
		state.transparent = e?.scrollTop <10
	})
	onBackPress(()=>{
		if(state.showPosition ||state.showSort||state.showFilter){
			state.showPosition = false
			state.showSort = false
			state.showFilter = false
			return true
		}
	})
	onLoad((opt) => {
		getNearbyData()
	})
	function onSort(item) {
		state.sortData = item
		change()
	}
	function onFilter(item) {
		state.filterData = item
		change()
	}
	function onPosition(item) {
		state.positionData = item
		let data = item.active.map(v=>v.name)
		if(data.length){
			state.positionLabel = data.join()
		}else{
			state.positionLabel = ''
		}
		change()
	}
	function setPopup(name) {
		if (name) {
			let val = state[`show${name}`]
			if (state.showPosition || state.showSort || state.showFilter) {
				state.showPosition = false
				state.showSort = false
				state.showFilter = false
				setTimeout(() => {
					state[`show${name}`] = !val
				}, 200)
			} else {
				state[`show${name}`] = !val
			}
		}
	}
	function change() {
		let data ={
			...state.filterData
		}
		if(state.sortData?.value){
			data['closest'] =  state.sortData.value
		}
		if(state.positionData.ids.length){
			data[state.positionData.key] =  state.positionData.ids.join()
		}
		emit('change', cloneDeep(data))
	}
	async function getNearbyData(){
		let res = await api.nearbyData()
		if(res.error==0){
			state.data = res.data
		}
	}
</script>

<style lang="scss" scoped>
	.comp-content {
		height: 44px;
		// background-color: #fff;
		font-size: 28rpx;
		color: #666;
		overflow: hidden;
		.position-icon,
		.sort-icon,
		.filter-icon{
			transition: .3s;
			margin-left: 6rpx;
		}
		
		.position,
		.sort{
			min-width: 200rpx;
			max-width: 240rpx;
		}
		.position{
	
		}
		.sort{
		
		}
		.filter{
	
			width: 140rpx;
		}
		.active{
			font-weight: 600;
			color:#333
		}
		.rotate{
			transform: rotateZ(180deg);
		}
	}

	.filter-list-box {
		padding: 28rpx 52rpx;

		.filter-item {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: normal;
			margin-bottom: 24rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}
		}

		.filter-item-active {
			color: #1AC6A0;
		}
	}
</style>